<template>
  <div class="order">
    <div class="search">
      <div class="up">
        <span>订单编号</span>
        <el-input v-model="input" placeholder="请输入订单编号" style="width: 160px"></el-input>
        <span>会员名称</span>
        <el-input v-model="input" placeholder="请输入会员名" style="width: 160px"></el-input>
        <span>商店名</span>
        <el-input v-model="input" placeholder="请输入商店名" style="width: 160px"></el-input>
      </div>
      <div style="margin-top: 20px">
        <span>下单时间</span>
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            style="margin-right: 40px">
        </el-date-picker>
        <el-button type="danger">搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <div class="edit">
      <el-button type="danger">批量发货</el-button>
      <el-button>导出待发货订单</el-button>
    </div>
    <div class="table">
      <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column
            fixed
            prop="id"
            label="订单号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="shopShopName"
            label="商店名"
            width="200">
        </el-table-column>
        <el-table-column
            prop="customerUsername"
            label="会员名"
            width="150">
        </el-table-column>
        <el-table-column
            prop="status"
            label="订单状态"
            width="150">
          <template v-slot="{row}">
            <el-tag v-show="row.status==0">未支付</el-tag>
            <el-tag v-show="row.status==1">已支付</el-tag>
            <el-tag v-show="row.status==2">已确认</el-tag>
            <el-tag v-show="row.status==3">已退款</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="totalPrice"
            label="总价"
            width="120">
        </el-table-column>
        <el-table-column
            prop="totalPrice"
            label="操作">
            <template v-slot="scope">
              <el-button type="warning" @click="confirmOrder(scope.row)">确认</el-button>
              <el-button @click="cancelOrder(scope.row)">取消</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.load();
  },
  methods:{
    load(){
      this.shopId = this.$route.query.id;
      // let user=JSON.parse(localStorage.getItem("user"));
      // let token=user.token;
      this.$axios
          .get("http://localhost:2321/business/queryOrders",{
                params:{
                  shopId:this.shopId
                }
              }
              // {
              //   headers:{
              //     token:token
              //   }
              // }
          )
          .then(res => {
            this.tableData=res.data;
          })
          .catch(err => {
            return Promise.reject(err);
          });
    },
    confirmOrder(row){
      console.log(row)
      let user=JSON.parse(localStorage.getItem("user"));
      // let token=user.token;
      this.$axios
          .get("http://localhost:2321/business/confirmOrder",{
                params:{
                  businessId:user.id,
                  orderId:row.id
                }
              }
              // {
              //   headers:{
              //     token:token
              //   }
              // }
          )
          .then(res => {
            alert('确认成功');
            this.load();
            console.log(res)
          })
          .catch(err => {
            return Promise.reject(err);
          });
    },
    cancelOrder(row){
      let user=JSON.parse(localStorage.getItem("user"));
      // let token=user.token;
      this.$axios
          .get("http://localhost:2321/business/cancelOrder",{
                params:{
                  businessId:user.id,
                  orderId:row.id
                }
              }
              // {
              //   headers:{
              //     token:token
              //   }
              // }
          )
          .then(res => {
            alert('删除成功');
            this.load();
            console.log(res)
          })
          .catch(err => {
            return Promise.reject(err);
          });
    }
  },
  data() {
    return {
      input: '',
      options: [{
        value: '选项1',
        label: '未付款'
      }, {
        value: '选项2',
        label: '已付款'
      }, {
        value: '选项3',
        label: '代发货'
      }, {
        value: '选项4',
        label: '已发货'
      }, {
        value: '选项5',
        label: '已完成'
      }, {
        value: '选项6',
        label: '已取消'
      }],
      value: '',
      value1:'',
      tableData: []
    }
  }
}
</script>

<style scoped>
.order .search span{
  padding: 10px 12px 10px 20px;
  color: #515a6e;
}
.order .search{
  background-color: #f0f0f0;
  padding: 10px 12px 10px 0px;
  border-radius: 10px;
  margin-left: 20px;
  margin-right: 20px;
}
.order .edit{
  margin: 20px 0 20px 20px;
}
.order .table{
  margin-left: 20px;
  margin-right: 20px;
}
</style>
